<template>
  <el-form-item :rules="item.rule" :label="item.label" :prop="item.prop">
    <el-input
      v-model="formData[item.prop]"
      @input="inputChange"
      @focus="inputFocus"
      :disabled="item.disabled"
      :maxlength="item.max"
      :minlength="item.min"
      :placeholder="
        item.placeholder === undefined ? '请输入' : item.placeholder
      "
      :readonly="item.readonly === undefined ? false : item.readonly"
      :clearable="item.clearable === undefined ? true : item.clearable"
      :show-word-limit="
        item.showWordLimit === undefined ? false : item.showWordLimit
      "
    >
      <template slot="prepend" v-if="item.prepend">{{ item.prepend }}</template>
      <template slot="append" v-if="item.append">{{ item.append }}</template>
      <i
        v-if="item.suffixIcon"
        slot="suffix"
        class="el-input__icon el-icon-search"
        @click="item.click(formData, item)"
      ></i>
      <i
        v-if="item.prefixIcon"
        slot="prefix"
        class="el-input__icon el-icon-search"
        @click="item.click(formData, item)"
      ></i>
    </el-input>
  </el-form-item>
</template>

<script>
import _ from "lodash";

export default {
  name: "inputCom",
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
    inputFocus() {
      if (this.item.focus) {
        this.item.focus(this.formData[this.item.prop]);
      }
    },
    change() {
      this.formData[this.item.prop] = _.trimStart(
        this.formData[this.item.prop]
      );
      if (this.item.change) {
        this.item.change(this.formData[this.item.prop]);
      }
    },
    inputChange: _.debounce(function() {
      this.change();
    }, 500)
  }
};
</script>

<style scoped lang="scss"></style>
